<template>
    <div>
        <h4>费用信息</h4>
        <div class="fee-card">
            <p>费用ID：9999999999</p>
            <p>费用标识：一次性费用</p>
            <p>费用类型：水费</p>
            <p>付费对象：58栋2单元1201</p>
            <p>费用项：按月导入水费金额</p>
            <p>费用状态：收费中状态</p>
            <p>建账时间：2020-12-15</p>
            <p>计费开始时间：2020-12-15</p>
            <p>计费结束时间：2020-12-15</p>
            <p>费用金额：26.21</p>
            <p>导入费用名称：按月导入水费金额</p>
            <p>面积：94.36</p>
            <p>单价：0.36</p>
            <p>附加费：0.36</p>
        </div>
        <h4>缴费历史</h4>
        <el-form
            :model="queryForm"
            label-width="20px"
            :inline="true"
            size="small"
        >
            <el-form-item >
                <el-date-picker
                    v-model="queryForm.c"
                    type="month"
                    placeholder="请选择开始时间"
                    value-format="yyyy-MM"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item >
                 <el-date-picker
                    v-model="queryForm.c"
                    type="month"
                    placeholder="请选择结束时间"
                    value-format="yyyy-MM"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="handleSearch"
                    >查询</el-button
                >
                <el-button icon="el-icon-delete" @click="handleClear"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-table :data="tableData" border stripe>
            <el-table-column prop="a" label="缴费ID"></el-table-column>
            <el-table-column prop="a" label="周期(单位:月)"></el-table-column>
            <el-table-column
                prop="a"
                label="应收金额(单位:元)"
            ></el-table-column>
            <el-table-column
                prop="a"
                label="实收金额(单位:元)"
            ></el-table-column>
            <el-table-column prop="a" label="缴费时间"></el-table-column>
            <el-table-column prop="a" label="缴费起始时间"></el-table-column>
            <el-table-column prop="a" label="缴费结束时间"></el-table-column>
            <el-table-column prop="a" label="状态"></el-table-column>
            <el-table-column prop="a" label="备注"></el-table-column>
            <el-table-column label="操作"></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: "payFeeHistory",
    data() {
        return {
            queryForm: {},
            tableData: [],
        };
    },
    methods: {
        handleSearch() {},
        handleClear() {}
    },
};
</script>

<style lang="scss" scoped>
.fee-card {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    p {
        width: 33%;
        line-height: 20px;
    }
}
</style>